云胡的 blog

# 云胡的编程随笔第 2 期

# 一、点滴记录

# 2.1 URL 参数编码

前端在用 URL 传递参数时，遇到汉字需要转换为百分比编码，以避免服务器识别错误。

const params = new URLSearchParams();
params.append("name", "张三");
params.append("city", "北京");

const url = `https://example.com/api?${params.toString()}`;
// 结果：https://example.com/api?name=%E5%BC%A0%E4%B8%89&city=%E5%8C%97%E4%BA%AC
1
2
3
4
5
6

# 2.2 Git Rebase

使用 git pull --rebase 命令可以使 Git 提交历史更整洁。

如果出现冲突，手动解决冲突后，使用 git add file.txt 将解决后的文件提交到暂存区，然后执行 git rebase --continue 继续变基。

# 2.3 Linux 命令

  • 查看所有用户的最后一次登录：

    lastlog
    1

  • 查看失败的登录尝试：

    lastb
    1

  • 查看当前运行进程信息：

    ps aux
    1

    可以通过 grep 进行过滤。

# 2.4 JavaScript 异步操作 (async/await)

在 JavaScript 中，可以使用 async / await 进行异步操作。async 关键字表示函数为异步函数。

当函数中遇到 await 时，会将后续的代码包装成一个微任务队列，然后暂停当前函数的执行，让出主线程。

之后执行同步代码，待同步代码（调用栈）执行完毕后，可以执行 await 之后的微任务。

异步操作常用于耗时较长的任务，例如网络请求、I/O 操作、浏览器中的 DOM 操作、多个依赖的异步任务、并行的异步任务等。

# 2.5 CSS 属性

  • pointer-events: 设置元素是否对鼠标事件做出反应。
  • z-index: 控制元素在 z 轴（垂直屏幕）的堆叠顺序，值越小，越靠近底部，可以为负数。
  • order: Flex 布局属性，控制元素在主轴上的排列顺序，默认为 0，数值越小，排列越靠前。
  • align-self: Flexbox 布局属性，用于单独控制某个 flex 项目在交叉轴上的对齐方式。
  • align-content: 设置多行之间的间距。

# 2.6 Vue Scoped CSS 和样式穿透

在默认情况下，CSS 的设置是全局的。

在 Vue 单文件组件的 <style> 标签中加上 scoped，表示这段样式仅作用于当前组件，不会影响到其他的组件或全局样式。

如果需要修改 Element UI 子组件的内部元素，直接修改可能会无效，因为无法穿透到子组件内部的 DOM 结构。需要使用 :deep() 来穿透子组件。

<template>
  <el-input class="my-input" />
</template>

<style scoped>
:deep(.my-input .el-input__inner) {
  border-color: red; /* ✅ 修改输入框边框 */
}
</style>
1
2
3
4
5
6
7
8
9

# 2.7 分阶段提示词技巧

对代码进行深入分析，理解「xx功能」是如何工作的。等你理解之后告诉我，我再给你布置具体的任务。

# 2.8 JavaScript 剩余参数

...rest 是 JavaScript 中的剩余参数语法，用于收集多个元素或属性到一个单一的数据结构中。

const person = { name: "Alice", age: 25, city: "Paris" };
const { name, ...rest } = person;
console.log(name); // "Alice"
console.log(rest); // { age: 25, city: "Paris" } （对象）
1
2
3
4

# 2.9 Element UI 表格固定列和表头

在 Element UI 的表格组件（<el-table>）中，fixed="left" 是一个用于表格列（<el-table-column>）的属性，会将该列固定在表格的左侧，当表格内容横向溢出有滚动条时，被固定的列始终可见，不会随滚动而消失。

如果需要固定表格的表头，可以通过设置 height 属性来实现。当表格数据超出容器高度时，表头会固定，表格内容可纵向滚动，而表头始终保持可见。

使用 max-height 可以让表格在数据较少时自适应高度，若表格所需的高度大于最大高度，则会显示一个滚动条。

# 2.10 LLM 术语记录

  • Token: 表示一个词元，是 LLM 处理文本的基本单位，它可能是单词的一部分，可能是一个单词，可能是一个标点符号。最近 LLM 模型很卷，常常说什么上下文窗口（长度） 1M，指的就是模型一次能处理 100 w 个 token。

  • 思维链 (Chain-of-thought): 之前 LLM 是一种概率预测的，因此它遇到精确的数学计算和推理的时候就很容易产生幻觉，给出看起来正确但是错误的答案，后面有一种思维链的技术，它可以让 LLM 模拟人类的思维方式，一步一步进行逻辑推理，直到解决系统性的问题，目前 OPenAI 已经在 IMO（国际国际数学奥林匹克）拿到了金牌，太恐怖了。

  • Transformer 架构: LLM 大部分是基于 transformer 架构的，transformer 架构不同于之前神经网络是因为它拥有一种自注意力机制（self-attention），它可以允许模型在处理句子（序列）中的每一个元素时，可以注意句子中所有的其他元素，并根据它们与当前元素的关联性来动态调整权重。

    举一个例子：

    句子：“The animal didn’t cross the street because it was too tired.”

    当处理 "it" 时：

    • 高权重："animal" (0.6), "tired" (0.3)
    • 低权重："street" (0.1)

    自注意力机制直接计算序列中所有位置（token）之间的关系，无需依赖前一步的结果。

    所有位置的表示可以同时独立计算，天然适合并行化，因此可以大幅缩短训练时间。

  • 多头注意力机制: 单头注意力机制只关注一种句子间的模式，而多头注意力机制可以让每个头在不同的子空间（subspace）中学习不同的关注模式，最后将结果合并。

    可以是一个头关注语义关系，另一个关注指代关系，再一个关注语义角色，最后将结果合并起来。

# 二、新的发现

  1. html2canvas: 一个 HTML 渲染器，可以对 DOM 进行屏幕截图：

    https://allenchinese.github.io/html2canvas-docs-zh-cn/docs/html2canvas-about.html (opens new window)

  2. Zread.ai: 解读开源项目，生成项目文档。

    https://zread.ai/ (opens new window)

  3. NotebookLM: 由 Google 推出的 AI 笔记助手，核心定位是 “基于个人文档的知识引擎”。

    它通过结合用户上传的私人资料（笔记、文档、论文等）与大型语言模型（如 Gemini），提供高度定制化的信息处理和智能问答服务。

    https://notebooklm.google/ (opens new window)

  4. FileSaver.js: 浏览器下载库

    https://github.com/eligrey/FileSaver.js (opens new window)

  5. Happy-LLM: 从零开始的大语言模型原理与实践教程

    https://github.com/datawhalechina/happy-llm (opens new window)

# 三、一点想法

在《计算机程序的构造与解释》中有一句名言：“程序必须为了人能阅读而写，只是顺带让机器能执行。”

这句话曾是软件开发的金科玉律，强调代码的可读性和可维护性，视其为工程师专业素养的体现。

但在 AI 时代，这一理念正面临颠覆。

人可以不了解程序的底层实现，就像我们不必知道大语言模型如何在多维空间中通过参数模拟智能一样，我们对内部运作机制一无所知。

曾经的代码黑盒，如今已进化为智能黑盒。

以微信 app 为例，普通用户无需了解其原理和结构，只需学会使用，进行打字、语音等操作即可。

传统的微信程序员需要深入了解 app 开发的原理和结构，以便在出现 bug 时进行修复。他们是旧时代的工匠，用双手和智慧雕琢代码。

然而，在未来的 AI 时代，即使是微信的程序员也可能不再需要了解这些底层细节。

AI 将能够自主编写代码、修复 bug，并自我测试修复结果。

程序员的角色，或许将从代码的创造者，转变为 AI 系统的引导者和守护者。

也许那一天并不会太远。

当 AI 逐渐接管代码的编写与维护，我们或许需要重新思考“智能”的定义，以及人类在技术变革中的价值与定位。

我们是否会将一部分思考能力让渡给 AI？

我们又该如何驾驭这种前所未有的力量，确保技术朝着符合人类福祉的方向发展？

这不仅是技术问题，更是哲学命题。

← 每周发现汇集 →